<template>
  <div class="fill-info-mian">
    <p class="tip-text">请填写您的信息，以便更准确地判断您的健康状况</p>
    <div class="msg-box">
      <div>
        <span>姓名</span>
        <span>
          <input v-model="userinfo.username" type="text" placeholder="请输入姓名">
          <i></i>
        </span>
      </div>
      <div>
        <span>年龄</span>
        <span>
          <input v-model="userinfo.age" type="number" placeholder="请输入年龄">
          <i>岁</i>
        </span>
      </div>
      <div>
        <span>身高</span>
        <span>
          <input v-model="userinfo.height" type="number" placeholder="请输入身高">
          <i>cm</i>
        </span>
      </div>
      <div>
        <span>体重</span>
        <span>
          <input v-model="userinfo.weight" type="number" placeholder="请输入体重">
          <i>kg</i>
        </span>
      </div>
    </div>
    <p class="btn">
      <span @click="handleSub">提交</span>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        userinfo: {
          username: '',
          age: '',
          height: '',
          weight: '',
        }
      }
    },
    methods: {
      handleSub() {
        if(!this.userinfo.username) {

          return false;
        } else if (!this.userinfo.age){

          return false;
        } else if (!this.userinfo.height){

          return false;
        } else if (!this.userinfo.weight){

          return false;
        }
        console.log(this.userinfo);
      },
    },
  }
</script>

<style scoped lang="css">
@import "../../assets/css/healthMonitoring/fillInfo.css";
</style>
